<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    #result{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
</style>
<body>
    <a href="#home">home</a>
    <a href="#ref">ref</a>
    <div id="result"></div>

    <script>
        // HashRouter 原理 就是借助 hashchange 事件来监听地址栏变化 
        // hash 锚点  
        // hashchange  当 地址栏的hash 值发生变化时 调用
        window.addEventListener("hashchange",function(){
            //  location  地址栏对象
            // console.log(location);
            //获取hash 值
            let {hash} = location;
            // console.log(hash);
            switch(hash){
                case "#home":
                    result.innerHTML = "home  home  home ";
                break;
                case "#ref":
                    result.innerHTML = "ref  ref  ref ";
                break;
                default:
                    result.innerHTML = "404 ";
                break;

            }

        })




    </script>
</body>
</html>